<template>
  <div class="app-container" style="width: 40%">
    <el-form ref="form" :model="car" label-width="80px" :rules="rules">
      <el-form-item label="车牌号码" prop="carNo">
        <el-input v-model="car.carNo"  ></el-input>
      </el-form-item>

      <el-form-item label="品牌" prop="carBrand">
        <el-select  v-model="car.carBrand"  placeholder="选择品牌" label-width="80px"  @change="brandChange">
          <el-option
            v-for="item in brand"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="型号" prop="carModel">
        <el-select v-model="car.carModel" placeholder="选择型号" label-width="80px">
          <el-option
            v-for="item in model"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="颜色" prop="carColor">
        <el-select  v-model="car.carColor" placeholder="选择颜色" label-width="80px">
          <el-option
            v-for="item in color"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="载重(吨)" prop="carLoad">
        <el-input v-model="car.carLoad"></el-input>
      </el-form-item>

      <el-form-item label="座位数" prop="carSeats">
        <el-input v-model="car.carSeats"></el-input>
      </el-form-item>

      <el-form-item label="油耗(百公里)" prop="oilWear">
        <el-input v-model="car.oilWear"></el-input>
      </el-form-item>

      <el-form-item label="初始里程(公里)" prop="initMil">
        <el-input v-model="car.initMil"></el-input>
      </el-form-item>

      <el-form-item label="保养里程(公里)" prop="maintainMil">
        <el-input v-model="car.maintainMil"></el-input>
      </el-form-item>

      <el-form-item label="保养周期(月)" prop="maintainPeriod">
        <el-input v-model="car.maintainPeriod"></el-input>
      </el-form-item>

      <el-form-item label="发动机号码" prop="engineNum">
        <el-input v-model="car.engineNum"></el-input>
      </el-form-item>

      <el-form-item label="车架号" prop="frameNum">
        <el-input v-model="car.frameNum"></el-input>
      </el-form-item>

      <el-form-item label="供应商" prop="supId">
        <el-select v-model="car.supId" placeholder="选择供应商" label-width="80px">
          <el-option
            v-for="item in super1"
            :key="item.id"
            :label="item.unitName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="购买日期" prop="purchaseDate">
        <div class="block"  label-width="80px"   v-model="car.purchaseDate">
          <el-date-picker
            v-model="car.purchaseDate"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="部门" prop="deptId">
        <el-select v-model="car.deptId" placeholder="选择部门" label-width="80px">
          <el-option
            v-for="item in dept"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="车辆状态">
        <el-select v-model="car.carState" placeholder="选择车辆状态" label-width="80px">
          <el-option
            v-for="item in state"
            :key="item.id"
            :label="item.text"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="备注">
        <el-input v-model="car.remarks"></el-input>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="car.isdisable" placeholder="选择状态" label-width="80px">
          <el-option
            v-for="item in optionsc"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>



      <el-form-item>
        <el-button type="success"  @click="saveOrUpdate('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  <style >


  </style>
<script>
//-- 导入api
import carApi from "@/api/rao_car.js";
import driverApi from "@/api/rao_driver.js";
//-- 引入组件
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        phone:'',

      },
      rules: {
        carNo: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 6, max: 6, trigger: 'blur'}
        ],
        carLoad: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 4, trigger: 'blur'}
        ],
        carSeats: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 2, trigger: 'blur'}
        ],
        oilWear: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 3, trigger: 'blur'}
        ],
        initMil: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        maintainPeriod: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        maintainMill: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        frameNum: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 1, max: 5, trigger: 'blur'}
        ],
        engineNum: [
          {required: true, message: '请输入', trigger: 'blur'},
          {min: 4, max: 7, trigger: 'blur'}
        ],
        carBrand: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        entrytime: [
          {required: true, message: '请选择日期', trigger: 'change'}
        ],
        purchaseDate: [
          {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
        ],
        deptId: [
          { required: true, message: '请选择部门', trigger: 'change'}
        ],
        carModel: [
          {required: true, message: '请选择型号', trigger: 'change'}
        ],
        carColor: [
          {required: true, message: '请填写', trigger: 'blur'}
        ],
        supId: [
          {required: true, message: '请填写', trigger: 'blur'}
        ],


      },
      brand:{},
      model:{},
      color:{},
      super1:{},
      dept:{},
      state:{},

      optionsc: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '未启用'
      }],


      car: {
        carNo: '',
        carBrand: '',
        carModel: '',
        carColor: '',
        carLoad: '',
        carSeats:'',
        oilWear:'',
        initMil:'',
        maintainMil:'',
        maintainPeriod:'',
        engineNum:'',
        frameNum:'',
        supId:'',
        deptId:'',
        purchasePrice:'',
        purchaseDate:'',
        carState:'',
        remarks:'',
      },
    };
  },
  created() {
    this.init();
    //获取所有的供应商
    this.getSuper();
    //获取所有部门
    this.getDeptById();
    //获取状态
    this.getState();
    //获取汽车品牌id
    this.getBrandById();
    this.getColor();

  },
  watch: {
    //-- 监听路由是否有发生变化
    $route(to, form) {
      this.init();
    },
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getCarById(id);
      } else {
        this.car = {};
      }
    },
    //-- 保存和更新是同一个页面，那form表单的提交方法
    saveOrUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.car.id) {
            this.saveCar();
          } else {
            this.updateCar();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //-- 单纯保存的方法
    saveCar() {
      carApi.saveCar(this.car).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "添加成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/basic_setting/car_list" });
      });
    },
    //-- 单纯修改的方法
    updateCar() {
      carApi.updateCar(this.car).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "修改成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/basic_setting/car_list" });
      });
    },

    getCarById(id) {
      carApi.findCarById(id).then((response) => {
        this.car = response.data.car;
        this.brandChange();
      });
    },

    //获取品牌
    getBrandById(){
      this.brand = {},
      carApi.getBrand().then((response) => {
        this.brand = response.data.items;
      });
    },

    brandChange(){
     this.car.carModel ={},
       this.carColor={},
      carApi.getDicById(this.car.carBrand).then((response)=>{
        //通过品牌id来获取对应的text
        this.model=response.data.items;
      })
    },
    getColor(){
      this.color=[],
      carApi.getDicById(27).then((response)=>{
        //通过品牌id来获取对应的text
        this.color=response.data.items;
      })
    },

    getSuper(){
      carApi.getSuper().then((response)=>{
        //通过品牌id来获取对应的text
        this.super1=response.data.items;
      })
    },
    //获得所有的部门
    getDeptById(){
      driverApi.getDept().then((response) => {
        this.dept = response.data.dept;
      })
    },

    //获得所有车辆的状态
    getState(){
      carApi.getDicById(35).then((response)=>{
        //通过品牌id来获取对应的text
        this.state=response.data.items;
      })
    }




  },
};
</script>
<style>
</style>
